<template>
  <view class="app bg-white">
    <view class="header">
      <text class="detail-title">{{ title }}</text>
    </view>

    <scroll-view class="content" scroll-y>
      <view class="box">
        <mt-uparse :html="content" :preview="false" :selectable="true"></mt-uparse>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
  import mtUparse from '@/components/mt-uparse/mt-uparse.vue';
  import { ref, nextTick, getCurrentInstance } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { getDialogDetail as getDataApi } from '@/api/dialog/index';
  import { report } from '@/utils/exception';

  const title = ref<string>('');
  const content = ref<string>('');
  const contentHeight = ref<string>('');
  const _this = getCurrentInstance();
  const query = uni.createSelectorQuery().in(_this);

  onLoad((option: any) => {
    const id = option.id;
    getDataApi(id)
      .then((res) => {
        title.value = res.data.title;
        content.value = res.data.content;
        nextTick(() => {
          query
            .select('.content')
            .boundingClientRect((data: any) => {
              uni.getSystemInfo({
                success(res) {
                  contentHeight.value = res.windowHeight - data.top + 'px';
                },
              });
            })
            .exec();
        });
      })
      .catch((err) => {
        report(err);
      });
  });
</script>

<style lang="scss" scoped>
  .header {
    padding: 25rpx 30rpx;
    border-bottom: 12rpx solid #f5f5f5;

    .detail-title {
      display: flex;
      position: relative;
      padding-left: 35rpx;
      font-size: 32rpx;
      font-weight: 600;
      word-wrap: break-word;
      line-height: 45rpx;
      letter-spacing: 1rpx;

      &::before {
        content: '';
        width: 8rpx;
        height: 36rpx;
        background: orange;
        top: 5rpx;
        left: 10rpx;
        position: absolute;
        border-radius: 10rpx;
      }
    }
  }

  .content {
    height: v-bind(contentHeight);

    .box {
      padding-top: 20rpx;
      padding-bottom: 50rpx;
    }
  }
</style>
